import { Canvas, Story, Meta } from "@storybook/blocks";
import { Icon } from "metabase/ui";
import { Stack, FileInput } from "metabase/ui";
import * as FileInputStories from "./FileInput.stories";

<Meta of={FileInputStories} />

# FileInput

Our themed wrapper around [Mantine FileInput](https://v6.mantine.dev/core/file-input/).

## Docs

- [Mantine FileInput Docs](https://v6.mantine.dev/core/file-input/)

## Examples

<Canvas of={FileInputStories.Default} />

### Size - md

<Canvas of={FileInputStories.EmptyMd} />

#### Asterisk

<Canvas of={FileInputStories.AsteriskMd} />

#### Description

<Canvas of={FileInputStories.DescriptionMd} />

#### Disabled

<Canvas of={FileInputStories.DisabledMd} />

#### Error

<Canvas of={FileInputStories.ErrorMd} />

#### Left Section

<Canvas of={FileInputStories.IconMd} />

### Size - xs

<Canvas of={FileInputStories.EmptyXs} />

#### Asterisk

<Canvas of={FileInputStories.AsteriskXs} />

#### Description

<Canvas of={FileInputStories.DescriptionXs} />

#### Disabled

<Canvas of={FileInputStories.DisabledXs} />

#### Error

<Canvas of={FileInputStories.ErrorXs} />

#### Icon

<Canvas of={FileInputStories.IconXs} />
